<template>
	<model-page>
		<view class="visiteInfo">
			<Card>
				<view class="baseInfo_topic">
					基础信息
				</view>
				<image src="../../../static/image/alarm/line.png" mode="" class="line"></image>
				<!-- 用户信息-->
				<view class="baseInfo">
					<view class="floor1">
						<view class="left">
							<view v-for="(item,index) in baseInfoList[0]" class="row">
								<view class="label">
									{{item.label}}
								</view>
								<view class="content">
									{{olderInfo[item.props]}}
								</view>
							</view>
						</view>
						<view class="right">
							<image :src="olderInfo?.avatar || '../../../static/image/avatarPlace.png'" mode=""></image>
						</view>
					</view>
					<view class="floor2" v-if="isExpend">
						<view v-for="(item,index) in baseInfoList[1]" class="row space">
							<view class="label">
								{{item.label}}
							</view>
							<view class="content">
								{{olderInfo[item.props]}}
							</view>
						</view>
						<view class="foldable" @click="expend(false)">
							收起 <image src="../../../static/image/arrow_bottom.png" mode=""></image>
						</view>
					</view>
					<view v-else class="expend" @click="expend(true)">
						<text>查看详情</text><image src="../../../static/image/arrow_top.png" mode=""></image>
					</view>
				</view>
			</Card>
			<view class="topic">
				探望申请单：
			</view>
			<Card>
				<view class="baseInfo_topic">
					提交时间：<text>{{visiteInfo?.createTime || ""}}</text>
				</view>
					<image src="../../../static/image/alarm/line.png" mode="" class="line"></image>
					<view class="listWrap">
						<view class="row space" v-for="(item,index) in timeList">
							<view class="label">
								{{item.label}}
							</view>
							<view class="content">
								{{visiteInfo[item.props]}}
							</view>
						</view>
						
					</view>
						<image src="../../../static/image/alarm/line.png" mode="" class="line"></image>
						<view class="topic">
							审批流程
						</view>
						<view class="listWrap">
							<view class="row space">
							<view class="label">
								监护人
							</view>
							<view class="content">
								{{visiteInfo?.emergencyContact || ""}} {{visiteInfo.noticeStatus === "0" ? "未通知" : "已通知"}}
							</view>	
							</view>
							<view class="row space">
							<view class="label">
								看护人
							</view>
							<view class="content">
						{{visiteInfo.auditor}} {{reviewStatusCash(visiteInfo.reviewStatus)}}
							</view>	
							</view>
						</view>
			</Card>
			<view class="pass">
				<Card>
					<view class="listWrap">
						<view class="row space" v-for="(item,index) in passList">
							<view class="label">
								{{item.label}}
							</view>
							<view class="content">
								{{visiteInfo[item.props]}}
							</view>
						</view>
					</view>
				</Card>
			</view>
			<view class="remark">
			<Card>
				<view class="topic">
					备注
				</view>
				<image src="../../../static/image/alarm/line.png" mode="" class="line"></image>
				<textarea v-model="postData.comment" placeholder="请输入处理结果" v-if="visiteInfo.reviewStatus === '1'" :maxlength="200"/>
				<view class="remarkResult" v-else>
					{{visiteInfo.comment}}
				</view>
			</Card>	
			</view>
			<view class="btn_group">
				<view class="process_state" v-if="visiteInfo.reviewStatus === '1'">
					<view @click="reject">
						驳回
					</view>
					<view @click="agree">
						同意
					</view>
				</view>


			</view>
		</view>
	</model-page>

</template>

<script setup>
import {reactive, ref} from 'vue'
import Card from '@/component/Card.vue'
import {onLoad} from '@dcloudio/uni-app'
import {getVisitDetails,checkVisit} from '@/api/visite.js'
import {getElderInfo} from '@/api/index.js'
const isExpend = ref(false)
const textResult = ref("")
const expend = (flag)=>{
	isExpend.value = flag
}
onLoad((options)=>{
	const {vid,elderId} = options
	getolderInfo(elderId)
	reqVisiteInfo(vid)
})
// 获取访问详情数据
const visiteInfo = ref({})
const reqVisiteInfo = async(id)=>{
	try{
	const {code,data:res} = await getVisitDetails({id})
	if(code === 200){
		visiteInfo.value = res
		postData.visitId = res.id
	}
	}catch(e){
		//TODO handle the exception
	}
}
const olderInfo = ref({})
const getolderInfo = async(elderId)=>{
	try{
	const {code,data:res} = await getElderInfo({elderId})
	if(code === 200){
		olderInfo.value = res
	}
	}catch(e){
		//TODO handle the exception
	}
}
// 驳回
const reject = ()=>{
	if(postData.comment === ""){
		return uni.showToast({
			icon:'error',
			title:"请备注驳回原因"
		})
	}else{
	postData.reviewStatus = "2"	
	examine()
	}
	
}
const agree = ()=>{
	postData.reviewStatus = "3"
	examine()
}
const postData = reactive({
	visitId:"",
	comment:"",
	reviewStatus:""
})
const examine = async()=>{
const {code,data:res} = await checkVisit(postData)
if(code === 200){
	if(res){
		uni.showToast({
			icon:"success",
			title:"操作成功！",
			duration:1000,
			complete() {
				setTimeout(()=>{
					uni.navigateTo({
						url:"/packageVisite/pages/index/index"
					})
				},1000)
			}
		})
	}
}
}
const baseInfoList = [
	[
		{
			label:"姓名",
			props:"elderName"
		},
		{
			label:"房间",
			props:"buildRoomNum"
		},
		{
			label:"性别",
			props:"gender"
		},
		{
			label:"年龄",
			props:"age"
		},
	],
	[
		{
			label:"联系电话",
			props:"phoneNumber"
		},
		{
			label:"身份证号",
			props:"cardId"
		},
		{
			label:"身高",
			props:"height"
		},
		{
			label:"体重",
			props:"weight"
		},
		{
			label:"家庭住址",
			props:"homeAddress"
		},
	]
]
const timeList = ref([
	{
		label:"来访人员",
		props:"visitorName"
	},
	{
		label:"来访时间",
		props:"visitTime"
	},
	{
		label:"联系电话",
		props:"phoneNumber"
	},
	{
		label:"车牌编号",
		props:"licensePlate"
	},
	{
		label:"身份证号",
		props:"idCard"
	},
	{
		label:"备注",
		props:"remark"
	},
])
const passList = ref([
	{
		label:"审批人",
		props:"auditor"
	},
	{
		label:"审批时间",
		props:"auditTime"
	},
])
const reviewStatusCash= (type)=>{
	let str = ""
	switch(type){
		case "1":
		str = "待审核"
		break;
		case "2":
		str = "驳回"
		break;
		case "3":
		str = "已同意"
		break;
	}
	return str
}

</script>

<style lang="less" scoped>
	.visiteInfo{
		.baseInfo_topic{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.line{
			height: 1rpx;
			width: 100%;
		}
		.baseInfo{
			margin-top: 28rpx;
			.floor1{
				display: flex;
				justify-content: space-between;
				.left{

				}
				.right{
					image{
						width: 228rpx;
						height: 184rpx;
					}
				}
			}
			.floor2{
				.foldable{
						height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					>image{
						width: 24rpx;
						height: 14rpx;
						margin-left: 14rpx;
					}
				}
			}
			.expend{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				>image{
					width: 24rpx;
					height: 14rpx;
					margin-left: 14rpx;
				}
			}

			.baseInfo_topic{
				text{
					color: #666666;
					font-size: 28rpx;
					font-weight: 500;
				}
			}

		}
	}
					.row{
						display: flex;
						font-weight: 400;
						font-size: 28rpx;
						margin-bottom: 14rpx;
						.label{
							color: #999999;
							margin-right: 22rpx;
						}
						.content{
							color: #333333;
						}
					}
					.space{
						justify-content: space-between;
					}
					.topic{
						margin: 28rpx 0;
					}
					.listWrap{
						margin-top: 15rpx;
					}
					.pass{
						margin-top: 45rpx;
					}
					.remark{
						margin-top: 45rpx;
					}
					.btn_group{
						.process_state{
							width: 100%;
							display: flex;
							view{
								flex: 1;
								height: 80rpx;
								border-radius: 40rpx;
								font-weight: 500;
								font-size: 32rpx;
								text-align: center;
								line-height: 80rpx;
								&:first-child{
									background-color: #F2F8FF;
									color: #666666;
									margin-right: 20rpx;
								}
								&:last-child{
									background:  linear-gradient( 180deg, #8072f2 0%, #147FF3 100%);;
									color: #FFFFFF;
							
								}
							}
						}

					}
					.remarkResult{
						padding: 10rpx 0;
						color: #333333;
						font-size: 28rpx;
					}
</style>
